        // 设置画布
        const canvas = document.querySelector('canvas');
        const ctx = canvas.getContext('2d');
        
        const width = canvas.width = window.innerWidth-5;
        const height = canvas.height = window.innerHeight-5;
        
        const para = document.querySelector('p');
        // 生成随机数的函数
        
        function random(min,max) {
          const num = Math.floor(Math.random() * (max - min)) + min;
          return num;
        }
        
        function randomColor() {
          return 'rgb(' +
                 random(0, 255) + ', ' +
                 random(0, 255) + ', ' +
                 random(0, 255) + ')';
        }
        
        function Shape(x, y, velX, velY, exists) {
          this.x = x;
          this.y = y; 
          this.velX = velX;
          this.velY = velY;
          this.exists = exists;
        }
        
        function Ball(x, y, velX, velY, exists, color, size) {
          Shape.call(this, x, y, velX, velY, exists);
          this.color = color;
          this.size = size;
        }
        
        Ball.prototype.draw = function() {
          ctx.beginPath();
          ctx.fillStyle = this.color;
          ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
          ctx.fill();
        }
        
        Ball.prototype.update = function() {
          if ((this.x + this.size) >= width) {
            this.velX = -(this.velX);
          }
        
          if ((this.x - this.size) <= 0) {
            this.velX = -(this.velX);
          }
        
          if ((this.y + this.size) >= height) {
            this.velY = -(this.velY);
          }
        
          if ((this.y - this.size) <= 0) {
            this.velY = -(this.velY);
          }
        
          this.x += this.velX;
          this.y += this.velY;
        
        }
        
        let balls = [];
        
        let balls_count = 255
        
        
        while (balls.length < balls_count) {
          let size = random(10, 15);
          let ball = new Ball(
            random(0 + size, width - size),
            random(0 + size, height - size),
            random(-7, 7),
            random(-7, 7),
            true,
            randomColor(),
            size
          );
          balls.push(ball);
        }
        
        Ball.prototype.collisionDetect = function() {
          for (let j = 0; j < balls.length; j++) {
            if (this !== balls[j] && balls[j].exists === true) {
              const dx = this.x - balls[j].x;
              const dy = this.y - balls[j].y;
              const distance = Math.sqrt(dx * dx + dy * dy);
        
              if (distance < this.size + balls[j].size) {
                balls[j].color = this.color = randomColor();
              }
            }
          }
        }
        
        function EvilCircle(x, y, velX, velY, exists, color, size) {
          Shape.call(this, x, y, velX, velY, exists);
          this.color = color;
          this.size = size;
        }
        
        EvilCircle.prototype.draw = function() {
          ctx.beginPath();
          ctx.lineWidth = 1;
          ctx.strokeStyle = this.color;
          ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
          ctx.stroke();
        }
        
        EvilCircle.prototype.checkBounds = function() {
          if ((this.x + this.size) >= width) {
            this.x -= this.size;
          }
        
          if ((this.x - this.size) <= 0) {
            this.x += this.size;
          }
        
          if ((this.y + this.size) >= height) {
            this.y -= this.size;
          }
        
          if ((this.y - this.size) <= 0) {
            this.y += this.size;
          }
        }
        
        EvilCircle.prototype.setControls = function() {
          window.onkeydown = e => {
            switch(e.key) {
              case 'a':
                this.x -= this.velX;
                break;
              case 'd':
                this.x += this.velX;
                break;
              case 'w':
                this.y -= this.velY;
                break;
              case 's':
                this.y += this.velY;
                break;
            }
          };
        }
        
        EvilCircle.prototype.collisionDetect = function() {
          for (let j = 0; j < balls.length; j++) {
            if (balls[j].exists === true){
              const dx = this.x - balls[j].x;
              const dy = this.y - balls[j].y;
              const distance = Math.sqrt(dx * dx + dy * dy);
        
              if (distance < this.size + balls[j].size) {
                balls[j].exists = false;
                balls_count --;
                para.textContent = "还剩" + balls_count + "个球";
              }
            }
          }
        }
        
        let size = 20;
        evilcircle = new EvilCircle( random(0 + size, width - size),random(0 + size, height - size),5,5,true,"rgb(255,255,255)",size);
        
        function loop() {
          ctx.fillStyle = 'rgba(0, 0, 0, 0.25)';
          ctx.fillRect(0, 0, width, height);
        
          evilcircle.draw();
          evilcircle.setControls();
          evilcircle.checkBounds();
          evilcircle.collisionDetect();
        
          for (let i = 0; i < balls.length; i++) {
            if (balls[i].exists === true) {
              balls[i].draw();
              balls[i].update();
              balls[i].collisionDetect();
            }
          }
        
          requestAnimationFrame(loop);
        }
        
        loop();